import React from 'react'
import { useState } from 'react'
import './index.css'

//解构List穿过的...item里面所有值t
export default function Item({todo,done,id,todoList,setTodoList}) {

 //鼠标移到li上，li变色，给li绑定鼠标移入移出事件，在这里事件都是react。没有this。所以e.target也不好确定移动目标
 const [isColorChange,setIsColorChange] = useState(false)
 //所以通过修改类名的形势来修改背景色,移入移出可以合并为一个事件，通过布尔值控制
 
 //函数柯里化
 const onMouseHandle =(bool)=>{
  // 外层函数接收参数
    return ()=>{
      //返回真正的事件函数修改
      setIsColorChange(bool)
    }
 }

 //多选框触发改变的事件函数（选择打勾）
//给input绑定onchange事件
 const checkChangHandle =(e)=>{
  // console.log(e.target.checked);
  // 因为props形式，需要从父一级一级把原始todolist 和settodolist传过来进行修改和设置
  //所以遍历todolist拿到key，对比当前key和点击key相等
   const newTodo = todoList.map(item=>{
      //拿到每一项，然后判断对比当前key和点击key相等
      if(item.id === id){
        //修改done值
        item.done = e.target.checked
      }
      //返回当前item
      return item
    })
  //然后修改State状态
  setTodoList(newTodo)
 }


 //点击删除按钮删除当前
//通过过滤的方式删除
 const deleteHandle= ()=>{
  //判断数组里的id是否和当前id一致,条件为true返回出一个新数组
 const newTodoList = todoList.filter(item => item.id !== id)
 setTodoList(newTodoList)
 }


  return (
    <li onMouseEnter={onMouseHandle(true)} onMouseLeave={onMouseHandle(false)} className={isColorChange? 'active' : ''}>
    <label>
      <input type="checkbox" onChange={checkChangHandle} checked={done}/>
      <span>{todo}</span>
    </label>
    <button className="btn btn-danger" onClick={deleteHandle} style={{display:isColorChange? 'block' : 'none'}}>删除</button>
  </li>
  )
}
